<template>
  <el-dialog
    :title="title"
    center
    :visible.sync="openState"
    width="1024px"
    append-to-body
    :close-on-click-modal="false"
    :before-close="handleClose"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="140px">
      <!-- 基本信息 -->
      <el-card class="form-card txnInfo-card">
        <div slot="header" class="label-header-msg">
          <span>基本信息</span>
        </div>

        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="明细标识号" prop="dtlNo">
              <el-input v-model="paperdetailForm.dtlNo" disabled/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="收款行行号" prop="payeeBrno">
              <el-input v-model="paperdetailForm.payeeBrno" disabled/>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="收款行行名" prop="payeeBrname">
              <el-input v-model="paperdetailForm.payeeBrname" disabled/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="收款人账号" prop="payeeActno">
              <el-input v-model="paperdetailForm.payeeActno" disabled/>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="收款人户名" prop="payeeName">
              <el-input v-model="paperdetailForm.payeeName" disabled/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="业务种类" prop="bizCtgyCode">
              <el-select v-model="paperdetailForm.bizCtgyCode" disabled placeholder="">
                <el-option label="00100" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="货币符号" prop="curcd">
              <el-input v-model="paperdetailForm.curcd" disabled/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="金额" prop="amount">
              <ht-amount-input v-model="paperdetailForm.amount" placeholder="" :disable="true"></ht-amount-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="协议号" prop="protoId">
              <el-input v-model="paperdetailForm.protoId" disabled/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="核验标识" prop="checkId">
              <el-select v-model="paperdetailForm.checkId" disabled placeholder="">
                <el-option label="CE01-已核验" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex">
          <el-col :span="24">
            <el-form-item label="附言" prop="remarks">
              <el-input type="textarea" v-model="paperdetailForm.remarks" disabled/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="付款客户标识" prop="payerId">
              <el-input v-model="paperdetailForm.payerId" disabled/>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="收款人客户结算名称" prop="payeeInName">
              <el-input v-model="paperdetailForm.payeeInName" disabled/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="收款人客户结算账号" prop="payeeInActno">
              <el-input v-model="paperdetailForm.payeeInActno" disabled/>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="征收机关流水号" prop="orgNo">
              <el-input v-model="paperdetailForm.orgNo" disabled/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="计费起始日期" prop="chgStDate" >
              <el-date-picker
                v-model="paperdetailForm.chgStDate"
                style="width: 100%"
                disabled
                type="date"
                value-format="yyyyMMdd"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="计费截至日期" prop="chgEdDate" disabled>
              <el-date-picker
                v-model="paperdetailForm.chgEdDate"
                style="width: 100%"
                disabled
                type="date"
                value-format="yyyyMMdd"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="缴费起始日期" prop="payStDate" disabled>
              <el-date-picker
                v-model="paperdetailForm.payStDate"
                style="width: 100%"
                disabled
                type="date"
                value-format="yyyyMMdd"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="缴费截至日期" prop="payEdDate" disabled>
              <el-date-picker
                v-model="paperdetailForm.payEdDate"
                style="width: 100%"
                disabled
                type="date"
                value-format="yyyyMMdd"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="应付日期" prop="payDate" disabled>
              <el-date-picker
                v-model="paperdetailForm.payDate"
                style="width: 100%"
                disabled
                type="date"
                value-format="yyyyMMdd"
              />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="原金额币种" prop="orgCurcd">
              <el-input v-model="paperdetailForm.orgCurcd" disabled/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="原金额" prop="orgAmt">
              <ht-amount-input v-model="paperdetailForm.orgAmt" disabled placeholder="金额" :disable="true"></ht-amount-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="滞纳金币种" prop="delayCurcd">
              <el-input v-model="paperdetailForm.delayCurcd" disabled/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="滞纳金" prop="delayAmt">
              <ht-amount-input v-model="paperdetailForm.delayAmt" disabled placeholder="金额" :disable="true"></ht-amount-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="附加内容" prop="addInfo">
              <el-input v-model="paperdetailForm.addInfo" disabled />
            </el-form-item>
          </el-col>
        </el-row>

      </el-card>
    </el-form>

    <el-row slot="footer">
      <el-col :span="2" :offset="11">
        <el-button @click="close">关闭</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
import HtAmountInput from "@/views/components/HtAmountInput";
export default {
  name: "collectHandelDetailDialog",
  components: { HtAmountInput },
  data() {
    return {
      currentPage4: 1, // 分页
      title: "",
      openState: false, // 是否显示弹出层
      form: {},
      paperdetailForm: {
        dtlNo: "2023082400031975", // 明细标识号
        payeeBrno: "313290040014", // 收款行行号
        payeeBrname: "中国工商银行", // 收款行行名
        payeeActno: "20110129wenwang", // 收款人账号
        payeeName: "李娜", // 收款人户名
        bizCtgyCode: "1", // 业务种类
        curcd: "CNY", // 货币符号
        amount: "3.14", // 金额
        protoId: "12345678", // 协议号
        checkId: "1", // 核验标识
        remarks: "附言", // 附言
        payerId: "001", // 付款客户标识
        payeeInName: "张三", // 收款人客户结算名称
        payeeInActno: "31255463245234", // 收款人客户结算账号
        orgNo: "758243555764", // 征收机关流水号
        chgStDate: "2023-12-04", // 计费起始日期
        chgEdDate: "2023-12-04", // 计费截至日期
        payStDate: "2023-12-04", // 缴费起始日期
        payEdDate: "2023-12-04", // 缴费截至日期
        payDate: "2023-12-04", // 应付日期
        orgCurcd: "CNY", // 原金额币种
        orgAmt: "99,999", // 原金额
        delayCurcd: "USD", // 滞纳金币种
        delayAmt: "44,444", // 滞纳金
        addInfo: "附加内容", // 附加内容
      },
      rules: {},
    };
  },

  methods: {
    handleClose() {
      this.openState = false;
    },

    show() {
      this.title = "小额批量代收业务收款单笔处理明细";
      this.openState = true;
    },

    // 拒绝
    reject() {
      console.log("拒绝");
    },

    // 收款
    paySuccess() {
      console.log("收款");
    },

    // 关闭
    close() {
      console.log("关闭");
      this.openState = false;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
};
</script>

<style scoped>
.el-checkbox__input.is-checked + .el-checkbox__label {
  color: #000000 !important;
}
.menu-tool-btn {
  width: 24px;
  height: 24px;
}

.menu-tree {
  height: 5%;
  margin-top: -5px;
  margin-left: 90%;
  font-size: 28px;
}
.block {
  float: right;
  margin-top: 10px;
}
</style>
